<template>
  <div class="signed">

    <div class="row signedList">
      <div class="signedListInfo">
        <span class="col_333 ListInfoL">缴费流水号</span>
        <span class="ListInfoR">
            <select v-model="seleInit">
              <option  :value="sel.rownum" v-for="sel in signedArr">{{sel.payId}}</option>
            </select>
        </span>
      </div>
    </div>
    <div v-for="item in signedArr" v-if="item.rownum == seleInit">
      <div class="row signedList">
        <div class="signedListInfo">
          <span class="col_333 ListInfoL">缴费编号</span>
          <span class="ListInfoR">{{item.feeId}}</span>
        </div>
      </div>
      <div class="row signedList">
        <div class="signedListInfo">
          <span class="col_333 ListInfoL">应缴金额</span>
          <span class="ListInfoR">{{item.totalAmt}}</span>
        </div>
      </div>
      <div class="row signedList">
        <div class="signedListInfo">
          <span class="col_333 ListInfoL">缴费人员</span>
          <span class="ListInfoR">{{item.feeUserName}}</span>
        </div>
      </div>
      <div class="row signedList">
        <div class="signedListInfo">
          <span class="col_333 ListInfoL">缴费单位</span>
          <span class="ListInfoR">{{item.corpName}}</span>
        </div>
      </div>

      <div class="row signedList" @click="SelInfo">
        <div class="applyListInfo">
          <span class="col_333 ListInfoL">支付方式</span>
          <span class="ListInfoR selPayWay">{{SelPayWay}}</span>
          <i class="icon iconfont icon-PayWay">&#xe6d0;</i>
        </div>
      </div>

      <input type="button" @click="signedBtn(item)" value="立即缴费" class="signedBtn" style="background: #ff4444">

      <!--弹出层-->

      <div id="modal-overlay">
        <div class="modal-data">
          <div class="modal-header row">
            <div class="col tl fs_12 col_000">更换付款方式</div>
            <div class="col col-20 tr" @click="overlay">
              <img src="../../../static/image/close.png">
            </div>
          </div>
          <div class="modal-content">
            <label class="row" v-for="(item, index) in selOptions" :id="item.cardSeq"
                   :class="{'noBorder': index == selOptions.length-1}"  @click.prevent="selectType(item)">
              <div class="col tl col-10">
                <i class="icon iconfont icon-bank"></i>
              </div>
              <div class="col ">
                中国银行借记卡 (尾号{{item.cardNo.slice(-4)}})
              </div>
              <div class="col radio_box tr col-10">
                <input type="radio" :id="item.cardSeq" name="radio" :value="item.cardSeq" v-model="pick">
                <label :for="item.cardSeq"></label>
              </div>
            </label>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
  import { MessageBox } from 'mint-ui';

    export default {
      name: "my-info_pay-detail",

      data(){
        return {
          id: '',
          seleInit: 1,     //默认情况选中第一个
          seleObj: {},


          signedArr: [],
          SelPayWay:'请选择',
          pick: '',
          selOptions: [],
          selectCard: {
            cardNo: '',
            cardSeq: ''
          }
        }
      },

      methods:{
        signedBtn: function () {
          if(!this.selOptions.length){
            MessageBox('提示', '您暂未绑卡，请到首页进行绑卡操作哦～');
            return;
          }

          if(this.validTest()){
            this.$router.push({path:'/pay/payingNow', query: this.selectCard})
          }
        },

        selectType: function (item) {
          this.overlay();
          this.SelPayWay = '中国银行借记卡 (尾号' + item.cardNo.slice(-4) +')';
          this.pick = item.cardSeq;
          this.selectCard = {
            cardNo: item.cardNo,
            cardSeq: item.cardSeq
          }
        },

        SelInfo: function () {
          if(!this.selOptions.length){
            MessageBox('提示', '您暂未绑卡，请到首页进行绑卡操作哦～');
            return;
          }
          this.overlay();
        },
        overlay: function () {
          var e1 = document.getElementById('modal-overlay');
          e1.style.visibility = (e1.style.visibility == "visible")? "hidden" : "visible";
        },

        validTest: function () {
          var testForm = true;

          if(this.pick == ''){
            DbsAlert.show({
              title: '提示',
              text: '请选择缴费方式'
            });
            return testForm = false;
          }

          return testForm;
        }
      },

      created: function(){
        this.signedArr = JSON.parse(sessionStorage.getItem('payNumArr'));
        //我的卡列表
        var that = this;
        this.$post(this.$urlAll.bank_card_list, {userid: window.sessionStorage.getItem('userId')}).then(function (response) {
          that.selOptions = response.t;
          if(!that.selOptions.length){
            MessageBox('提示', '您暂未绑卡，请到首页进行绑卡操作哦～');
          }

        })
      }


    }
</script>

<style scoped>
  @import "../../style/common.css";

  select{
    direction: rtl;
  }
  .signedList{
    height: 0.44rem;
    background-color: #fff;
    padding-left: 0.1rem;
  }
  .signedListInfo{
    border-bottom: 1px solid #eee;
    width: 100%;
    position: relative;
  }
  .signedList span{
    line-height: 0.44rem;
    font-size: 0.14rem;
  }
  .ListInfoR{
    padding-right: 0.1rem;
    font-size: 0.13rem;
    color: #666;
    position: absolute;
    right: 0px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);

  }
  .signedBtn{
    width: 2.93rem;
    height: 0.44rem;
    border: none;
    background-color: #999;
    font-size: 0.16rem;
    color: #fff;
    -webkit-border-radius: 0.05rem;
    -moz-border-radius: 0.05rem;
    border-radius: 0.05rem;
    outline: none;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-top: 0.6rem;
  }







  .applyList{
    height: 0.44rem;
    background-color: #fff;
    padding-left: 0.1rem;
  }
  .applyListInfo{
    border-bottom: 1px solid #eee;
    width: 100%;
    position: relative;
  }
  .applyList span{
    line-height: 0.44rem;
    font-size: 0.14rem;
  }
  .ListInfoR{
    padding-right: 0.1rem;
    font-size: 0.13rem;
    color: #666;
    position: absolute;
    right: 0px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);

  }
  .contect{
    width: 1.05rem;
    height: 100%;
    border: none;
    position: absolute;
    right: 0.1rem;
    line-height: 0.44rem;
  }

  .icon-sel {
    font-size: 0.35rem;
    position: absolute;
    right: 0.1rem;
    top: 50%;
    -webkit-transform: translateY(-47%);
    -moz-transform: translateY(-47%);
    -ms-transform: translateY(-47%);
    -o-transform: translateY(-47%);
    transform: translateY(-47%);
    color: #666;
  }
  .listSel{
    right: 0.35rem;
  }

  .signedBtn{
    width: 2.93rem;
    height: 0.44rem;
    border: none;
    background-color: #ff4444;
    font-size: 0.16rem;
    color: #fff;
    -webkit-border-radius: 0.05rem;
    -moz-border-radius: 0.05rem;
    border-radius: 0.05rem;
    outline: none;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-top: 0.6rem;
  }

  .waring{
    padding-left: 0.2rem;
    color: #ff4444;
  }
  .isSel{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    position: fixed;
    left: 0;
    top: 0;
    z-index: -101;
  }
  .selBox{
    width: 3rem;
    background-color: #ffffff;
    z-index: -100;
    position: fixed;
    top:50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-border-radius:0.05rem;
    -moz-border-radius:0.05rem;
    border-radius:0.05rem;
    overflow: hidden;
  }
  .selBox ul{

  }
  .selBox ul li {
    margin:0 0.2rem;
    font-size: 0.14rem;
    color: #333;
    height: 0.45rem;
    line-height: 0.45rem;
    border-bottom: 1px solid #eee;
    list-style: none;
    position: relative;
    opacity:1;
  }
  .selPayWay{
    padding-right: 0.25rem;
  }
  .icon-PayWay{
    font-size: 0.3rem;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #666;
  }


  .icon-weixin{
    display: inline-block;
    height: 0.3rem;
    width: 0.3rem;
    background-image: url("../../assets/image/wechat.png");
    -webkit-background-size:0.3rem;
    background-size:0.3rem;
    background-repeat: no-repeat;
    margin-top: 0.075rem;
    margin-left: 0.05rem;
  }

  .icon-bank{
    display: inline-block;
    height: 0.3rem;
    width: 0.3rem;
    background-image: url("../../assets/image/paysign3.png");
    -webkit-background-size:0.3rem;
    background-size:0.3rem;
    background-repeat: no-repeat;
    margin-top: 0.075rem;
    margin-left: 0.05rem;
  }
  .selBox ul li .weixin{
    height: 100%;
    width: 100%;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    font-size: 0.1rem;
  }
  .radio_box{

    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }
  .radio_box input{
    opacity: 0;
  }
  .radio_box label{
    width:15px;
    height:15px;
    position:absolute;
    top:30%;
    right: 5%;
    border:2px solid #ef4949;
    border-radius:50%;
    background:#fff;
    cursor:pointer;
  }

  .radio_box input:checked + label:after{
    content:'';
    width:9px;
    height:9px;
    position:absolute;
    top:3px;
    left:3px;
    background:#ef4949;
    border-radius:50%;
  }
  .contPay{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    z-index: 100;
  }





  /*弹出窗样式*/
  #modal-overlay {
    visibility: hidden;
    position: absolute;   /* 使用绝对定位或固定定位  */
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
    text-align:center;
    z-index: 10;
    background: rgba(0, 0, 0, .7);
  }
  /* 模态框样式 宽度和高度可以自定义的*/
  .modal-data{
    position: fixed;
    top: 50%;
    left: 50%;
    background-color: #fff;
    width: 80%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
  .modal-header{
    height: 0.33rem;
    line-height: 0.33rem;
    padding: 0 0.1rem;
    border-bottom: 1px solid #d1d2d4;
  }
  .modal-header img{
    width: 0.15rem;
    vertical-align: middle;
  }
  .modal-content>label{
    height: 0.44rem;
    line-height: 0.44rem;
    padding: 0 0.05rem;
    border-bottom: 1px solid #d1d2d4;
  }
  .modal-content img{
    width: 0.25rem;
    vertical-align: middle;
  }
  .radio_box{
    display:inline-block;
    position:relative;
  }

  .radio_box input{
    opacity: 0;
  }
  .radio_box label{
    width:15px;
    height:15px;
    position:absolute;
    top:30%;
    right: 5%;
    border:2px solid #ef4949;
    border-radius:50%;
    background:#fff;
    cursor:pointer;
  }

  .radio_box input:checked + label:after{
    content:'';
    width:9px;
    height:9px;
    position:absolute;
    top:3px;
    left:3px;
    background:#ef4949;
    border-radius:50%;
  }

  .noBorder{
    border: none !important;
  }
</style>
